<template>
  <div class="cpzx-nav-bar">
    <div class="nav-box">
      <div class="logo-box">
        <a href="/home">
          <img src="../../../assets/img/common/logo.png" alt="">
        </a>
      </div>
      <div class="list-box">
        <div
          class="list"
          v-for="(item, index) in lists"
          :key="item.name"
          :class="{
            active: index === currentIndex
          }"
        >
          <span>
            <a :href="item.link">
              {{ item.name }}
            </a>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CpzxNavBar",
    data() {
      return {
        currentIndex: 0,
        lists: [
          {
            name: "首页",
            link: "/home",
          },
          {
            name: "产品概述",
            link: "#cpgs"
          },
          {
            name: "适用对象",
            link: "#sydx"
          },
          {
            name: "产品架构",
            link: "#cpjg"
          },
          {
            name: "功能模块",
            link: "#gnmk"
          },
          {
            name: "大数据",
            link: "#dsj"
          },
        ]
      }
    }
  }
</script>

<style lang="scss">
  .cpzx-nav-bar {
    width: 100%;
    height: 64px;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    z-index: 10;
    .nav-box {
      width: 62.5%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logo-box {
        img {
          margin-left: -4px;
        }
      };
      .list-box {
        display: flex;
        margin-right: -14px;
        .list {
          margin-left: 24px;
          span {
            a {
              padding: 8px 4px;
              font-size: 16px;
              font-weight: normal;
              color: #fff;
            }
          }
        }
      };
      .active {
        span {
          a {
            border-bottom: 2px solid #fff;
          }
        }
      };
    }
  }
</style>